import { useEffect, useState } from 'react'
import { View, Text ,Button} from '@tarojs/components'
import './recycle.less'
import { appStore } from '@/store/store'
import { observer } from 'mobx-react'
function Recycle() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const disposeCount = appStore.onCountChange((newVal) => {
      setCount(newVal)
    })

    // 在组件卸载时取消订阅
    return () => {
      disposeCount()
    }
  }, [])

  return (
    <View className="index">
      <Text>Hello world!</Text>
      <View>Recycle!</View>

      <br />
      <br />
      <View>
        <View>{count}</View>
        <View>{appStore.count}</View>
        <Button onClick={() => appStore.increment()}>Increment</Button>
        <Button onClick={appStore.decrement.bind(appStore)}>Decrement</Button>
      </View>
    </View>
  )
}

export default observer(Recycle)
